<template>
  <div style="background-color:#F5F5F5;">
    <el-row>
      <el-col>
        <div class="brand-box">
          <el-row>
            <el-col :span="2">
              <h3 class="brand-title">品牌馆</h3>
            </el-col>
            <el-col :span="20">
              <ul class="brand-ul">
                <li v-for="(item,index) in grade" :key="index" @mouseover="changein(index)">
                  <a href="javascript:" :style="{'background-color':item.backgroundcolor,'color':item.color}">{{item.name}}</a>
                  <i class="el-icon-caret-bottom" v-show="item.flag"></i>
                </li>
              </ul>
            </el-col>
          </el-row>
          <el-row>
            <el-col>

              <ul class="brand-img">
                <li v-for="(item,index) in arraylist" :key="index" @mouseover="show(index)" @mouseout="hide(index)">
                  <a href="javascript:">
                    <img :src="item.url1" :class="{'octyi':item.octyi}"/>
                    <div class="hide-img" v-show="item.hideflag">
                      <img src="//image8.wbiao.co/mall/efd348b67bb3442090fd04d084cbdcd0.jpg" />
                    </div>
                  </a>
                </li>
              </ul>

            </el-col>
            <el-col>
              <ul class="img-title">
                <li v-for="item in 6">
                  <a href="javascript:">
                    <img src="//image8.wbiao.co/mall/a199495ff7cd47c1b58b3a254f699222.jpg" />
                  </a>
                </li>
              </ul>
            </el-col>
            <el-col :span="3">
              <h3 class="brand-title biao">腕表资讯</h3>
            </el-col>
            <el-col :span="21">
              <a href="javascript:" class="all">查看更多<i class="el-icon-arrow-right"></i></a>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <div class="video">
                <img src="//image8.wbiao.co/mall/dd90ae2d97964096a499ff23a88ffb7c.jpg" />
              </div>
            </el-col>
            <el-col :span="17">
              <el-card shadow="hover" class="card" body-style="padding:0px" v-for="itme in 4" :key="item">
                <div class="card-img">
                  <img src="//image8.wbiao.co/mall/56071a9a16f54aee94b70bf505730072.jpg" />
                </div>
                <p class="ptitle">宝珀倾情呈现五十噚Barakuda“Only Watch 孤品腕表”</p>
                <span class="header">
                  <img src="//image8.wbiao.co/mall/55e34fc90c054643a119c1df9e8f176c.jpg" />
                </span>
                <span class="header1">
                  练小爷
                </span>
                <span class="header2">
                  10-15
                </span>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {

        grade: [{
            name: "高级",
            flag: false,
            backgroundcolor: "",
            color: ""
          },
          {
            name: "顶级",
            flag: false,
            backgroundcolor: "",
            color: ""
          },
          {
            name: "奢华",
            flag: false,
            backgroundcolor: "",
            color: ""
          },
          {
            name: "轻奢",
            flag: false,
            backgroundcolor: "",
            color: ""
          },
          {
            name: "时尚",
            flag: false,
            backgroundcolor: "",
            color: ""
          }
        ],
        imglist: [{
            url1: "//image8.wbiao.co/mall/ca9b8dda456549f7a7ec2a296f3ca7fd.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/6d43baf38c3047b985f96063e42f1492.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/c2b7a584d48449109d89570789fda946.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/d065a8db671f48fda2bdae7769685081.jpg",
            hideflag: false,
            octyi:false
          }
        ],
        imglist1: [{
            url1: "//image8.wbiao.co/mall/7d530fba3d8b4c14aaa70044aecb841a.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/a433d5c2115b477588bd37c996ac14c1.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/287c75c80e94400592a47cd9d50a5ece.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/160cd711a5bf4bc58e986fbdb0f898d1.jpg",
            hideflag: false,
            octyi:false
          }
        ],
        imglist2: [{
            url1: "//image8.wbiao.co/mall/c56d9f372ce643ffbef498ceb7950272.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/c5652e47cbfa44b68f34a067e9c4abd4.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/eb0a3cdcd6f8462abfb8d937fe5d35e8.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/534cd2ad8c7d43b996b18ff446494430.jpg",
            hideflag: false,
            octyi:false
          }
        ],
        imglist3: [{
            url1: "//image8.wbiao.co/mall/15e252dd27f9403a8ef242ddd91f8275.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/988ccc97e6a94683b58a92d75c8f65f8.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/c87abeea4b854dc792284d70fdfc05fa.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/0ed93c23656347afb4b2f9b085b9b5d1.jpg",
            hideflag: false,
            octyi:false
          }
        ],
        imglist4: [{
            url1: "//image8.wbiao.co/mall/206152e8fb234acd91fd95ae98914e6c.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/5257a090872840d3b887367fc0f213ec.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/0b4826ae96644a308b07486662d96738.jpg",
            hideflag: false,
            octyi:false
          },
          {
            url1: "//image8.wbiao.co/mall/6c72bc377ddb443b99bfe9440f357684.jpg",
            hideflag: false,
            octyi:false
          }
        ],
       
        arraylist: [{}]

      }
    },
    components: {

    },
    methods: {
      changein(index1) {
        let arrylist = [this.imglist, this.imglist1, this.imglist2, this.imglist3, this.imglist4]
        this.grade.forEach((obj, index) => {
          if (index1 == index) {
            this.grade[index1].flag = true
            this.grade[index1].backgroundcolor = '#333'
            this.grade[index1].color = '#f2d291'
            this.arraylist = arrylist[index1]
          } else {
            this.grade[index].flag = false
            this.grade[index].backgroundcolor = '#999'
            this.grade[index].color = '#fff'
          }
        })
      },
      show(index1) {
        this.arraylist.forEach((obj,index)=>{
          if(index1==index){
            this.arraylist[index1].hideflag=true
            this.arraylist[index1].octyi=true
          }

        })
      },
      hide(index1) {
        this.arraylist.forEach((obj,index)=>{
          if(index1==index){
            this.arraylist[index1].hideflag=false
            this.arraylist[index1].octyi=false
          }

        })
      }
    }
  }
</script>

<style scoped="scoped">
  .brand-box {
    width: 1200px;
    margin: 0 auto;

  }

  .brand-box .brand-title {
    color: #4a4a4a;
    font-size: 20px;
    padding-left: 15px;
    padding-top: 20px;
  }

  .brand-box .brand-ul {}

  .brand-box .brand-ul li {
    width: 72px;
    height: 28px;
    margin-top: 20px;
    text-align: center;
    background-color: #e6e6e6;
    float: left;
    margin-right: 10px;
    border-radius: 3px;
  }

  .brand-box .brand-ul li a {
    display: block;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    color: #666;
  }

  .brand-box .brand-ul li i {
    display: block;
    position: relative;
    top: -6px;
  }

  .brand-box .brand-img:after {
    content: "";
    display: table;
    clear: both;
  }

  .brand-box .brand-img {
    margin-top: 10px;
  }

  .brand-box .brand-img li {
    /* border: 1px solid red; */
    /*    width: 200px;
     height: 200px; */
    position: relative;
    margin-right: 6px;
    float: left;
  }
  .brand-box .brand-img li a {
    display: block;

  }
   .brand-box .brand-img li a .octyi{
      /* opacity: 0.5; */
      -webkit-filter: blur(3px);
      filter: blur(3px);
   }

  .brand-box .brand-img li a .hide-img {
    /* border: 1px solid blue; */
    /* width: 200px; */
    /* height: 200px; */
    position: absolute;
    top: 50px;
    left: 60px;
  }

  .brand-box .img-title li {
    float: left;
    width: 190px;
    height: 95px;
    background-color: #fff;
    margin-right: 10px;
  }

  .brand-box .img-title li a {
    display: block;
    width: 120px;
    height: 48px;
    margin: 0 auto;
  }

  .brand-box .img-title li a img {
    line-height: 48px;
    padding-top: 25px;

  }

  .brand-box .all {
    float: right;
    font-size: 12px;
    color: #666;
    line-height: 48px;
    height: 48px;
    display: block;
    margin-left: 30px;
    padding-top: 10px;
  }

  .brand-box .all:hover {
    text-decoration: underline;
  }

  .brand-box .video {
    /* border: 1px solid blue; */
    /* width: 200px; */
    /* height: 800px; */

    overflow: hidden;
  }

  .brand-box .video img {
    max-width: 100%;


    transition: transform 1s;
  }

  .brand-box .video img:hover {
    transform: scale(1.1);
  }

  .brand-box .card {
    width: 190px;
    height: 255px;
    margin-left: 17px;
    float: left;
  }

  .brand-box .card .card-img img {
    max-width: 100%;
  }

  .brand-box .card .ptitle {
    color: #333;
    height: 36px;
    line-height: 18px;
    font-size: 12px;
    border-bottom: 1px solid #e5e5e5;
    width: 200px;
    padding-bottom: 20px;
  }

  .brand-box .card .header {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 15px;
    margin-top: 5px;
    border-radius: 50%;
  }

  .brand-box .card .header img {
    max-width: 100%;
    height: 100%;
  }

  .brand-box .card .header1 {
    font-size: 12px;
    position: relative;
    display: inline-block;
    top: -5px;
    color: #999;
  }

  .brand-box .card .header2 {
    font-size: 12px;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    color: #999;
  }
</style>
